{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros-protocol.html" import card with context %}

{% extends 'newsletter/base.html' %}

{# "noindex" pages should not have the canonical or hreflang tags: bug 1442331 #}
{% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-card') }}
  {{ css_bundle('newsletter-updated') }}
{% endblock %}

{% block content %}
  <main>
    <div class="mzp-l-content c-updated-notification">
      {% block messages %}
        {% if messages %}
          {% for message in messages %}
            <div class="mzp-c-notification-bar mzp-t-success {% if message.tags %}{{ message.tags }}{% endif %}">
              <p>{{ message }}</p>
            </div>
          {% endfor %}
        {% endif %}
      {% endblock %}
    </div>

    {% if unsubscribed_all %}  {# user requested to unsub all #}
      <div class="mzp-l-content mzp-t-content-md">
        <section class="c-updated-block">
          <header class="c-updated-block-header">
            <h1>{{ ftl('newsletters-youve-been-unsubscribed') }}</h1>
            <h2>{{ ftl('newsletters-were-sorry-to-see-you-go') }}</h2>
          </header>

          <form id="newsletter-updated-form" action="{{ action }}" method="post" class="c-updated-block-content c-updated-form">
            <div class="mzp-c-form-errors hidden" id="newsletter-updated-form-errors">
              <ul class="mzp-u-list-styled">
                <li class="error-reason hidden">{{ ftl('newsletters-please-select-a-reason') }}</li>
                <li class="error-try-again-later hidden">{{ ftl('newsletters-we-are-sorry-but-there') }}</li>
              </ul>
            </div>

            <h3>{{ ftl('newsletters-would-you-mind-telling-us') }}</h3>

            <label for="unsub0">
              <input type="checkbox" id="unsub0" name="reason0" value="{{ ftl('newsletters-you-send-too-many-emails', locale='en')|striptags }}">
              {{ ftl('newsletters-you-send-too-many-emails') }}
            </label>

            <label for="unsub1">
              <input type="checkbox" id="unsub1" name="reason1" value="{{ ftl('newsletters-your-content-wasnt-relevant', locale='en')|striptags }}">
              {{ ftl('newsletters-your-content-wasnt-relevant') }}
            </label>

            <label for="unsub2">
              <input type="checkbox" id="unsub2" name="reason2" value="{{ ftl('newsletters-your-email-design', locale='en')|striptags }}">
              {{ ftl('newsletters-your-email-design') }}
            </label>

            <label for="unsub3">
              <input type="checkbox" id="unsub3" name="reason3" value="{{ ftl('newsletters-i-didnt-sign-up', locale='en')|striptags }}">
              {{ ftl('newsletters-i-didnt-sign-up') }}
            </label>

            <label for="unsub4">
              <input type="checkbox" id="unsub4" name="reason4" value="{{ ftl('newsletters-im-keeping-in-touch-v2', locale='en')|striptags }}">
              {{ ftl('newsletters-im-keeping-in-touch-v3', fallback='newsletters-im-keeping-in-touch-v2') }}
            </label>

            <label for="unsub99">
              <input type="checkbox" id="unsub99" name="reason-text-p" value="{{ ftl('newsletters-other', locale='en')|striptags }}">
              {{ ftl('newsletters-other-v2') }}<br>
              <textarea id="unsub99-reason-text" cols="35" rows="3" name="reason-text" maxlength="500"></textarea>
            </label>
            <div class="mzp-c-button-container mzp-l-align-center">
              <button type="submit" id="newsletter-updated-form-submit" class="mzp-c-button">{{ ftl('newsletters-submit') }}</button>
            </div>
          </form>

          <div class="c-updated-form-thanks hidden">
            <p>{{ ftl('newsletters-thanks-for-telling-us-why') }}</p>
          </div>
        </section>
      </div>
    {% else %}
      <div class="mzp-l-content">
        <section class="c-updated-block">
          {% if ftl_has_messages('newsletters-consider-it-done',
                                 'newsletters-back-to-email-preferences',
                                 'newsletters-here-are-a-few-things') %}
            <header class="c-updated-block-header">
              <h1>{{ ftl('newsletters-consider-it-done') }}</h1>

              <p class="c-updated-back-link">
                <a href="#" class="back-button hide-from-legacy-ie">{{ ftl('newsletters-back-to-email-preferences') }}</a>
              </p>
            </header>

            <section class="c-updated-block-content">
              <h2 class="c-updated-block-header">
                {{ ftl('newsletters-here-are-a-few-things') }}
              </h2>

              <div class="mzp-l-card-third">
                {{ card(
                  title=ftl('newsletters-take-your-privacy'),
                  ga_title='Take your privacy with you',
                  desc=ftl('newsletters-travel-the-internet'),
                  cta=ftl('newsletters-download-the-app'),
                  image=resp_img('img/newsletter/confirm/mobile.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
                  aspect_ratio='mzp-has-aspect-16-9',
                  link_url=url('firefox.browsers.mobile.index'),
                )}}

                {% if LANG == 'en-US' %}
                  {% set title = 'Reclaim your stolen info from hackers'%}
                  {% set desc = 'Mozilla Monitor lets you see if you’ve been part of a data breach and automatically gets your stolen info back.' %}
                {% else %}
                  {% set title = ftl('newsletters-check-for-data-breaches') %}
                  {% set desc = ftl('newsletters-mozilla-monitor-is-a-free')%}
                {% endif %}

                {{ card(
                  title=title,
                  ga_title=title,
                  desc=desc,
                  cta=ftl('newsletters-sign-in-to-monitor'),
                  image=resp_img('img/newsletter/confirm/mozilla-monitor.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
                  aspect_ratio='mzp-has-aspect-16-9',
                  link_url='https://monitor.mozilla.org/',
                )}}

                {{ card(
                  title=ftl('newsletters-meet-our-parent-brand'),
                  ga_title='Meet our parent brand',
                  desc=ftl('newsletters-mozilla-the-non-for-profit'),
                  cta=ftl('ui-learn-more'),
                  image=resp_img('img/m24/og-16-9.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
                  aspect_ratio='mzp-has-aspect-16-9',
                  link_url=url('mozorg.about.index'),
                )}}
              </div>
            </section>
          {% else %}
            <h2 class="c-updated-block-header">{{ ftl('newsletters-while-here-why-not-check') }}</h2>

            <div class="mzp-l-card-third">
              <div class="mzp-l-card-third">
                {{ card(
                  title=ftl('newsletters-get-up-and-go'),
                  ga_title='Get up and go',
                  desc=ftl('newsletters-its-your-web-anywhere-you'),
                  cta=ftl('newsletters-get-firefox-for-mobile'),
                  image=resp_img('img/newsletter/confirm/mobile.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
                  aspect_ratio='mzp-has-aspect-16-9',
                  link_url=url('firefox.browsers.mobile.index'),
                )}}

                {{ card(
                  title=ftl('newsletters-added-extras'),
                  ga_title='Added extras',
                  desc=ftl('newsletters-make-firefox-do-more-with'),
                  cta=ftl('newsletters-find-out-how'),
                  image=resp_img('img/newsletter/confirm/addons.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
                  aspect_ratio='mzp-has-aspect-16-9',
                  link_url='https://addons.mozilla.org/',
                )}}

                {{ card(
                  title=ftl('newsletters-about-us'),
                  ga_title='About us',
                  desc=ftl('newsletters-whats-mozilla-all-about'),
                  cta=ftl('newsletters-were-glad-you-asked'),
                  image=resp_img('img/m24/og-16-9.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
                  aspect_ratio='mzp-has-aspect-16-9',
                  link_url=url('mozorg.about.index'),
                )}}
              </div>
            </div>
          {% endif %}
        </section>
      </div>
    {% endif %}
  </main>
{% endblock %}

{% block site_footer %}
  {{ super() }}
{% endblock %}

{% block js %}
  {% if unsubscribed_all %}
    {{ js_bundle('newsletter-unsubscribed') }}
  {% else %}
    {{ js_bundle('newsletter-updated') }}
  {% endif %}
{% endblock %}
